Menú acordeón con Indexhibit en 4 pasos

Publicado en Actualizado por Skeku

Agradecimientos totales a Thenine que ha sido quien se lo ha currado mejorando notablemente mi método.

Paso 1: Descargar la última versión de jQuery actual. (Descargar jQuery [en]).

Paso 2: Sustituir la versión que viene con Indexhibit por la que acabas de descargar. El js está localizado en [carpeta-Indexhibit] > [ndxz-studio] > [site] > [js].

Paso 3: Descargar este archivo javascript: Collapsable.menu.js (clic derecho > guardar como).

Paso 4: Subirlo a nuestro espacio web y hacer la llamada desde nuestro index.php del mismo modo que se hacen las otras llamadas a archivos js. Creo que no hace falta ni que lo diga 😉

Y listo. Más rápido y sencillo imposible. Comentar que sólo funcionará si no se ha modificado la estructura del menú de Indexhibit. Tal y como yo hacía en la forma que expliqué la otra vez, sí que había que hacerlo.

Le pongo como pega que al probarlo en el portfolio me he dado cuenta que no es compatible con sIFR. No funciona en Explorer ni Opera :S Aún así, solución eficaz y muy sencilla de implementar.

  1. Hola skeku, lo primero gracias por mencionarme.

    Lo segundo: El script funciona perfectamente (al menos con Jquery 1.2.1) desde IE 5.5 en adelante, igual que en Opera. Es posible que tengas algun conflicto con los cambios que has hecho pero si haces la llamada desde el tema «sample» (por ejemplo) sin modificar nada más verás que funciona.

  2. Bueno es una solución aunque no la mejor….. Ys i tiene ciertas incompatibilidades con algunos exploradores.

  3. The nine, el script funciona correctamente tal y como dices. Yo a lo que me refiero es que con el reemplazo sIFR no funciona en Explorer + Opera.

    Que quizá es cosa de mi código pero me extraña muchisimo el que firefox y safari lo pillen y los otros dos no.

  4. Bueno yo no lo probé para sIFR la verdad, asi que no vi si funcionaba o no, aunque extrañarse que algo pete con i.e. hoy en día es casi como extrañarte que el chikichiki sea un éxito nacional.

    ¿Que no es la mejor solución? ¿Que hay otras alternativas? Seguro que si, nunca lo propuse como la mejor, ni la única siquiera. Solo dije en un comentario que era «la que yo utilicé». Se trataba de hacer algo sencillo que pudiera aplicar cualquier persona como yo mismo, que no tengo ni pajolera idea de javascript ni me apetece aprender. Añades una linea a tu código y voilá.

    Por cierto ya que estamos mi nick es thenine, todo junto. Saludos de nuevo a todos y gracias por las críticas, aunque me temo que no voy a seguir desarrollandolo 😉

  5. y para safari, firefox funciona?? Yo lo quiero hacer, pero es que no tengo ni pajotera idea en donde tengo que meter ese código. En fin, creo que me daré por vencida.

  7. Pues mira, me interesaba seguir este método pero yo sí que no tengo ni idea de cómo se hace la llamada al js desde index… ¿alguien podría explicarlo, por favor?

  8. hola, me encuentro con el mismo problema que santi, veo miles de archivios index.php, cual es el que tengo que tocar y como? soy nula en esto. Gracias

  9. @ana y @santi, todo dependerá del tema que tengáis activado. En cualquier caso el index.php está situado en la misma ruta que comento arriba, sólo que en un nivel superior:

    [carpeta-Indexhibit] > [ndxz-studio] > [site] > aquí tiene que estar el php.

    No obstante hace un tiempo puse un link a unos tutoriales que igual también os ayudan:

    http://stereoplastika.com/teorika/?tag=indexhibit

  10. Hola!!
    Muchas gracias por la info! Realmente muy útil! He conseguido instalar el menú en acordeón en la página que estoy montando y funciona muy bien (por lo menos con Firefox y Safari desde mac).
    Me ha surgido, pero, un problemilla:
    He detectado que después de configurar el menú en acordeón, las exposiciones de la web que están configuradas con pase de imágenes «Thickbox» no funcionan!!!
    Al clicar la imagen, se hace el fundido en el fondo, pero no se carga la imagen.

    Viendo esto, he sustituido los archivos que he modificado para el menú acordeón por los originales y el modo Thickbox vuelve a funcionar bien.

    ¿Le pasa a alguien más?
    ¿Existe alguna solución?
    ¿Tengo que prescindir de este tipo de menú si quiero utilizar el modo Thickbox?

    …
    Muchas graciasss

  11. Hola,
    estoy intentando hacer el menú desplegable, pero me he quedado en el mismo paso que ana y santi. y yo en el nivel que dices (skeku): [carpeta-Indexhibit] > [ndxz-studio] > [site] > aquí tiene que estar el php.
    Ahí no tengo ningún php, solo tengo las carpetas de css, eatock, img, js, plugin y sample, pero ningún index.php. en cambio en un nivel superior si que tengo.
    Me estoy liando bastante con todo esto, por favor si alguien explicase todos los pasos (para tontos) me haría un favor a mi y a todos los que están como yo.
    Muchas gracias de antemano.

  12. Por cierto, si os molestan estas preguntas por que os da palo volver a explicar todo esto que seguro que lo veis super básico (que lo entiendo), y conoceis algún sitio dónde lo expliquen bien, también me vale.
    ya me he leído unas cuantas veces el tutorial de stereoplastika (que lo valoro mucho y me ha ayudado un huevo), pero para poder hacer cosillas un poco más avanzadas, se queda a medio camino.
    Pues eso que si sabéis de algun foro o blog o simil que hablen de esto y lo expliquen bien también me sirve. Mil gracias!

  13. Victor, estas preguntas nunca son mal recibidas. Evidentemente no todas podrán ser respondidas, por lo menos por mi parte, porque no me sé Indexhibit al dedillo 🙂

    Lo miro cuando llegue a casa pero es posible que me haya equivocado. Por defecto, indexhibit trae (o traía cuando yo lo instalé) dos temas diferentes: el eatcock y el sample. Dentro de cada uno de ellos debería haber una estructura de css, js, etc.. pero bueno que lo miro y te digo algo.

    La llamada al js es una carga de javascript normal y corriente. ejemplo:

    script type=’text/javascript’ src=’http://www.criteriondg.info/portfolio/ndxz-studio/site/js/jquery.js’

    Tendrías que poner delante y detrás las etiquetas de apertura y cierre de script script y /script. Pues Eso mismo lo metes donde se carguen otros js que suelen estar entre las etiquetas head del html.

  14. Muchas gracias Skeku!
    Se agradece mucho que la gente colabore así.
    Ahora mismo lo pruebo y te digo algo.
    GRACIAS!

  15. hola Skeku, yo he montado sin problemas el menu desplegable, lo que quiero ahora es ver si puedo modificar el tamaño de los «titulos» de cada seccion, pero lo he hecho combinandolo como lo hacias tu en la «antigua manera» y no se ha podido… se anula el «acordeon» y solo me muestra (si en otro tamaño) las secciones, y la prmera «sub-seccion», no se si me estoy explicando….alguna idea de como cambiar el tamaño de las «secciones» e conjunto con el script?

  16. Hola, gracias por la explicación, ha sido muy sencillo.

    Mi problema es que, al pasar el cursor por encima del nombre de los proyectos, no cambia el icono a la tipica manita con el indice levantado, de maner que la gente no sabe que se puede clckar sobre los nombre para desplegar los proyectos. Si clickas, se desplegan bien, pero pierde «intuicion». A alguien le pasa tambien? Se puede solucionar? Gracias!!

  17. @luis, tienes que añadir una propiedad CSS extra a la id de section.tittle. La de cursor: pointer para añadir lo que dices 🙂

  18. vale, yo soy un neofito en esto del css, me podrias explicar exactamente qué archivo editar y que código meterle, y donde? Por favor. 😀

    Gracias!!

  19. por cierto, hay alguna linea de codigo o plugin o algo que se le pueda meter para que al clcickar sobre un proyecto para desplegarlo, se pliegue cualquier otro que tuvieras abierto? Gracias de nuevo!

  20. @Luis:

    Tienes que modificar la hoja de estilos CSS llamada style.css. La tendrás ubicada más o menos en una ruta parecido a esto:

    tudominio/ndxz-studio/site/sample/style.css

    Ahí tienes que buscar:

    #menu ul li.section-title

    le tienes que añadir la propiedad:

    cursor:pointer;

    Con eso ya te haría lo del cursor. Sobre lo otro que comentas, es un efecto acordeón, no creo que sea mucho problema añadirlo. Te lo miraré este finde si puedo que ahora ando algo espeso 😀

  23. si, lo había encontrado, pero no sé cómo adaptarlo a indexhibit… estoy seguro que se puede hacer y no debe de ser muy difícil puesto que ya he visto varias páginas así, pero ni idea de cómo hacerlo aún. Gracia de nuevo por tu ayuda.

    Luis Arpa

  24. Señores… he logrado instalar el famoso menu acordeon… segun los cuatro pasos magicos de SKEKU.
    Ahora remito a una pregunta que Silvia… mas arriba diagnosticaba…
    LA DESAPARICIÓN DEL «THICKBOX» solo aparece el icono de carga y la difuminación del fondo, pero ¡O CRUEL DESGRACIA! desaparece la imagen.
    Como puedo solucionar el problema…

    saludos, y feliz dia de la Marmota

  25. Pues a mi no me funciona en Firefox. En donde si me funciona es en Safari. No lo he probado en más, pero me resulta extraño que en Firefox no vaya. he probado con varias versiones de jquery, por si las moscas, pero nanai de la china. alguna solución?

  26. @ant0n y el de mi portfolio sí te funciona bien? Lo digo para que pruebes con el código del mío, aunque teóricamente es el mismo :S

  27. @Luis
    Para hacer que se oculten las demas opciones al clickar la que queremos puedes hacer lo siguiente:

    El el fichero collapsable.menu.js
    subtituye la funcion:

    //Expandir y ocultar
    $(«#menu ul li.section-title»).click(function(){
    $(this).nextAll().slideToggle(«fast»);
    });

    por esta otra:

    //Expandir y ocultar
    $(«#menu ul li.section-title»).click(function(){
    $(«#menu ul li.section-title»).nextAll().hide();
    $(this).nextAll().slideToggle(«fast»);
    });

    esto hara que se abra la seccion selecionada y se cierre la anterior

    🙂 espero que le sirva a alguien

  30. Hola!

    A mi me gustaría saber como puedo conseguir que cuando cliques en una sección del menú se quede activada. He visto que Thenine en su página lo tiene, que el menú se queda activado donde estas. Pero no consigo hacerlo (y eso que he mirado si tiene alo diferente, etc.). Sabéis como se hace?

  31. Hola,
    Llevo horas leyendo por todas partes como hacer el menú acordeón y … Yo no tengo mucha idea de diseño Web, así que siento preguntar cosas obvias.

    Paso 4: Subirlo a nuestro espacio web y hacer la llamada desde nuestro index.php del mismo modo que se hacen las otras llamadas a archivos js. Creo que no hace falta ni que lo diga 😉

    A qué se refiere a subir a nuestro espacio web? y lo de hacer la llamda desde el index.php es esto verdad?

    La llamada al js es una carga de javascript normal y corriente. ejemplo:

    script type=’text/javascript’ src=’http://www.criteriondg.info/portfolio/ndxz-studio/site/js/jquery.js’

    Deberas siento preguntar estas chorradas, si alguien puede resolverme la dudilla.
    Muchas gracias !

  34. @ZAPIRO

    A mi me ocurría lo mismo. La solución para usar Thickbox y Menú Expandible con jQuery 1.3.2 es eliminar una «@» del código de jquery.thickbox.js. Es la única @ del archivo, pero de todas formas, por si no la encuentras, es la línea 79.

    Funciona en firefox y en safari, no he podido probarlo en otros navegadores.

    Espero haberte ayudado.

    Un saludo

  35. Yo he podido arreglar el problema del thickbox como dijo Pablo, pero ahora no funciona en Explorer 8, aunque ya no se queda la animación de carga. En Chrome, Safari y Firefox funciona perfecto.

  36. Una pregunta, a ver si alguien me sabe decir ya que no me entero mucho: ¿Cómo modifico el estilo de los elementos que están dentro del acordeón para que, por ejemplo, el color sea distinto al del título de la sección?

  37. Hola a todos.

    He probado lo que pones y a mi me fucniona a medias. Los sub menús de la izquierda se pliegan como ha de ser, pero cuando clicko una opción de ese menú (imaginemos una opción en el submenú 3), me abre la página que toca en la derecha, pero vuelve a la primera opción en el menú de la izquierda.

    Alguna solución? Muchas gracias.

  38. @Xavier, sé a lo que te refieres. Eso pasa porque al recargar la página, no se le pasa ninguna «etiqueta» o clase para definir cuál está activa.

    No debe ser complicado. Si me das un poco de tiempo, lo miro 🙂

  41. Sigo sin comprender en donde está el index.php al que hacen referencia y desde donde se llama al fichero .js (en el index. php principal no veo escritura html dnd insertarlo)
    perdón si la pregunta es muy básica pero releeí todas las respuestas y sigo sin comprender como y desde donde se llama al js (que ya subí con ftp a las correspondientes carpetas)

    gracias desde ya y perdon si es muy obvio y no me doy cuenta… :S

  43. ahora sí me funciona, he modificado solo la de sample, muchas gracias Skeku! (me habia liado con tantos index) 🙂

  44. hola, segui las intrucciones y todo funciono de maravilla, el unico problema es el siguiente, estoy unsando en formato de exhibicion thickbox, y creo que al momento de actualizar la version de jquery me hace un falso o algo y deja de funcionar :s, alguna sugerencia

  45. Hola, saben como hacer para que una de las secciones quede estática? Es decir que no sea desplegable?

    Muchas gracias! 😀

  46. Daniela, estoy apuntándome cosillas para ver si saco un hueco y poderos responder, pero me cuesta 😀
    Así de primeras lo único que se me ocurre para mantener una fija es sacándola fuera y no gestionándolo con Indexhibit para así poder darle otra clase diferente y que el javascript del acordeón no afecte sobre ella.

    Tal y como está hecho el efecto acordeón que se comenta aquí, actúa sobre todos los «section-title». Cada exposición que creas con Indexhibit lleva esa clase asociada.

    Supongo que se podrá hacer, pero me lo tendría que mirar con tiempo.

  47. Hola gente,

    vuelvo a vosotrxs para comentaros que no me ha funcionado añadir la linea

    $(”#menu ul li.section-title”).nextAll().hide();

    en el collapsable.menu.js para que al clicar un menu para que se despliegue, al mismo tiempo se pliegue otro que ya estubiera desplegado… a alguien le ha funcionado?

    Ademas quería preguntar si alguien sabe si se pueden añadir subcarpetas a las secciones de las exposiciones y cómo o desde dónde hacerlo.

    Muchas gracias!

  50. iidd veo que llegué tarde pero pudiste arreglarlo? Si no te importa, comenta qué hiciste por si a alguien le surge el mismo problema 🙂

  51. Soy uno más que no sabe ver donde está el index.php. El caso es que dentro de ndxz-studio/site/eatock (que es el tema que tengo activado) no encuentro ningún index.php. He buscado otros index.php pero no he visto ninguna llamada a ningún archivo .js.

    Otra opción que he probado es crear un index.php propio para la carpeta eatock insertando el código que indicabas para llamar al collapsable.menu.js, pero sin resultado alguno. Así que estoy bloqueado. Muchas gracias de antemano.

  52. Sólo me faltaba llamar al archivo «jquery-1.4.2.min.js» desde index.php

    quedando de este modo…

    <script type=’text/javascript’ src=’/site/js/jquery-1.4.2.min.js’>

    Saludos!

  53. He creado un menú acordeón según estos pasos pero tengo un problema, entro en la web y el menú me sale a una altura, y cuando hago click en una de las secciones desplegables el menú se sube un poco. Luego al hacer click en una de las secciones de dentro se vuelve a colocar en su lugar. Por que puede ser?
    Aparte de esto hay una sección que aparece siempre desplegada.

  54. He seguido investigando y lo de subir y bajarme un pelin el menu, solo me pasa en las secciones en las que tengo el modo de exibición en horizontal. Si pongo slideshow o cualquier otra, o en las páginas de links, contactos, etc, no da problemas de movimientos.

  55. Hola:
    Este tutorial me ha ido perfecto. Pero tengo un duda. Tenemos creados subsecciones, que son nada menos, que secciones ocultas a las que se accede a través del menú, el problema a es que cuando se accede a estas el menú se cierra.
    Os dejo la pàgina web: http://www.carlosmoreno.com.es/index.php

    ¡Muchas gracias!
    pd: ¿Sabéis como dar un estilo diferente a las secciones fuera del menú acordeón, como el caso del «about»? ¡Gracias!

  56. Hola:
    Al final dejé la web con el menú abierto, pero me gustaría encontrar solución al problema.
    La idea es que cundo se entré en las subseccions (secciones ocultas) el menú no se cierre. ¿Quizás con iframes? ¿Algun añadido al java?

    !Muchas gracias!

  57. Hola Luis Ara
    ¿Has conseguido que el desplegable se cierre al clickear otro?

    Estoy intentando todo lo que he leido acá y funciona perfectamente salvo que no vuelve a plegarse a tocar otra sección

    ¿Alguien sabe como solucionarlo?

    GRacias por toda esta info

  58. Hola, estoy intentando hacer el menu acordeon, pero soy nulo, un negado, ya no se que hacer, hay que escribir en la hoja de estilo? o en la de index? o en las dos??,

    perdonadme, soy un negado.

  59. Hola.
    Muchas gracias por la info, que es super util y muy bien explicado para los neófitos. De momento no he podido seguir este tutorial, pues había seguido el anterior que habías escrito. En cuento tenga un ratito me pongo a hacerlo según este método, que creo que es más sencillo.
    La única duda que tengo es si existe alguna manera de que el menu aparezca cerrado por defecto, (y ya puestos a pedir, que cuando se clica en alguna sección, se mantenga esa sección abierta).
    Muchas gracias

Los comentarios están cerrados.

A continuación:

Invitaciones para A.viary

Invitaciones para A.viary